<template>
	<view class="content">
		<view class="info">
			<view class="info-photo separate">
				<text class="item-content">{{$t('app.my.headPortrait')}}</text>
				<image class="photo" :src="$getImg(user.photo, 'head')" mode="scaleToFill" border="0"></image>
			</view>
			<view class="info-item separate">
				<text class="item-content">{{$t('platform.org.employee.prop.account')}}</text>
				<text class="item-value">{{user.account}}</text>
			</view>
			<view class="info-item separate">
				<text class="item-content">{{$t('app.my.isAdmin')}}</text>
				<text class="item-value">{{user.isSuper | codeFormat(yesOrNoOptions)}}</text>
			</view>
			<view class="info-item separate">
				<text class="item-content">{{$t('platform.org.employee.prop.name')}}</text>
				<text class="item-value">{{user.name}}</text>
			</view>
			<view class="info-item separate">
				<text class="item-content">{{$t('platform.org.employee.prop.gender')}}</text>
				<text class="item-value">{{user.gender | codeFormat(userSexOptions)}}</text>
			</view>
			<view class="info-item separate">
				<text class="item-content">{{$t('platform.org.employee.prop.status')}}</text>
				<text class="item-value">{{user.status | codeFormat(userStatusOptions)}}</text>
			</view>
			<view class="info-item separate">
				<text class="item-content">{{$t('app.my.phoneNumber')}}</text>
				<text class="item-value">{{user.mobile}}</text>
			</view>
			<view class="info-item-text separate">
				<text class="item-content">{{$t('common.field.address')}}</text>
				<text class="item-value-text">{{user.address}}</text>
			</view>
			<view class="info-item separate">
				<text class="item-content">{{$t('app.my.mailbox')}}</text>
				<text class="item-value">{{user.email}}</text>
			</view>
			<view class="info-item separate">
				<text class="item-content">QQ</text>
				<text class="item-value">{{user.qq}}</text>
			</view>
			<view class="info-item separate">
				<text class="item-content">{{$t('platform.org.employee.prop.wcAccount')}}</text>
				<text class="item-value">{{user.wcAccount}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import constants from '@/utils/constants.js'
	
	export default {
		props:{
			user: {
				type: Object,
				default() {
					return { }
				}
			},
		},
		data() {
			return {
				yesOrNoOptions: constants.yesOrNoOptions,
				userStatusOptions: constants.userStatusOptions,
				userSexOptions: constants.userSexOptions,
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		margin: 0 14px;
		font-size: 14px;
		line-height: 15px;
	}
	
	.info {
		
	}
	
	.info-photo {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
    .photo {
		width: 50px;
		height: 50px;
		border-radius: 25px;
	}
	
    .separate {
		padding: 15px 0;
		border-bottom: 1px solid #e1e1e1;
	}
	
    .info-item {
		display: flex;
		justify-content: space-between;
	}
	
    .item-content {
		color: #999;
	}
	
    .item-value {
		
	}
	
	.info-item-text {
		display: flex;
		flex-direction: column;
	}
	
	.item-value-text {
		margin-top: 10px;
		word-break: break-all;
	}
</style>